import * as React from "react";
import { observer } from "mobx-react";
import { Row, Col, Menu } from "antd";
import { WeaInputNumber, WeaCheckbox, WeaSelect, WeaLocaleProvider} from "ecCom";
import HuobiFormatterStore from "../FormatterSettingDialog";
const getLabel = WeaLocaleProvider.getLabel;
export interface IHuobiFormatter {
    store: HuobiFormatterStore;
}
@observer
export default class HuobiFormatter extends React.Component<IHuobiFormatter, {}> {
    render() {
        const { store } = this.props;
        const { xiaoshuvalue = 2, onChangeXiaoshuwei, huobiOptions, huobiType = '￥', onChangeHuobiType, valueType, onClickValueType, selectValueType = "1"} = store;
        const huobi = huobiType == '1' ? "" : huobiType;
        const qfw = ",";
        let xs = "";
        for (let i = 0 ; i < xiaoshuvalue ; i++) {
            let num = i==0 ? ".1" :"0";
            xs += num;
        }
        return (
            <div>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mhoqxl`} className="edcreport-formatter-common">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6ac8my`} span={4} style={{ verticalAlign: 'top', display: 'inline-block', lineHeight: '33px' }}>
                        <label>{getLabel('526948','小数位数：')}</label>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mledkw`} span={8}>
                        <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ulh8s7`} value={xiaoshuvalue} onChange={onChangeXiaoshuwei} min={0} max ={30} style={{ width: 60, marginRight: 10 }}></WeaInputNumber>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gzh0yj`} className="edcreport-formatter-common">
                    <label>{getLabel('526949','货币符号：') }</label>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zvzt2k`} className="edcreport-formatter-common">
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yo8ui9`}
                        style={{ width: 200 }}
                        options={huobiOptions}
                        value={huobiType}
                        //showSearch={true}
                        optionFilterProp="false"
                        onChange={onChangeHuobiType}
                    />
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gbcm1j`} className="edcreport-formatter-common">
                    <label>{getLabel('526950','负数:') }:</label>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2tkr4z`} className="edcreport-formatter-common">
                    <div className="edcreport-valuetype-list-wrapper">
                        <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@ntjjhp`}
                            onClick={onClickValueType}
                            selectedKeys={[selectValueType]}
                        >
                            {valueType.map(menu => (
                                <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@hnykm1@${menu.key}`} key={menu.key} className="edc-report-valuetypeitem">
                                    <span className={menu.color == 'red' ? "edc-report-redFont" : ""}>{menu.showname1 + huobi +menu.showname2+ qfw +menu.showname + xs + menu.showname3}</span>
                                </Menu.Item>
                            ))}
                        </Menu>
                    </div>
                </Row>

            </div>
        );
    }
}